<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <pre>
            <code>
      new Promise((reslove) => {
        reslove(2);
        new Promise((reslove) => {
          reslove(5);
        }).then(console.log);
      }).then(console.log);
      // 输出结果：5 2

      new Promise((reslove) => {
        setTimeout(() => {
          reslove(2);
          new Promise((reslove) => {
            reslove(5);
          }).then(console.log);
        });
      }).then(console.log);
      // 输出结果：2 5
            </code>
        </pre>
      看下输出结果
    </div>
    <script>
      /**
       * then 方法进入微队列需要满足两个条件：完成，注册
       *
       * 题一：
       *    首先执行 reslove(2) 属于父Promise进入了完成态
       *    然后执行子Promise的 reslove(5) 属于子Promise进入了完成态
       *    此时，两个Promise都进入了完成态，但都没有注册，所以微队列还没有东西
       *    在然后执行子Promise的 then 方法，注册了回调函数，所以微队列有东西了
       *    最后是执行父Promise的 then 方法，放入微队列
       *    所以最后输出：5,2
       *
       * 题二：
       *    首先执行到 setTimeout 这里，他是宏任务，放入宏队列中
       *    第二步执行到父Promise的 then 方法这里，说明父Promise注册了
       *    然后去执行宏队列中的任务，先执行 reslove(2)，说明父Promise是完成态了
       *    因为父Promise完成，注册了，将 then 回调放入微队列中，此时因为宏任务还没有执行完，是不会执行新的微任务的
       *    在然后就是先完成子Promise，reslove(5) 然后执行子Promise then 方法，放入微队列中
       *    此时宏任务执行完成，按照事件循环的规则，此时需要执行微队列中所有的任务，只有当所有微任务执行完成后，才会去执行下一个宏任务
       *    所以最后输出：2,5
       * **/

      new Promise((reslove) => {
        reslove(2);
        new Promise((reslove) => {
          reslove(5);
        }).then(console.log);
      }).then(console.log);
      // 输出结果：5 2

      new Promise((reslove) => {
        setTimeout(() => {
          reslove(2);
          new Promise((reslove) => {
            reslove(5);
          }).then(console.log);
        });
      }).then(console.log);
      // 输出结果：2 5
    </script>
  </body>
</html>
